<template>
	<div class="update-container">
		<form>
			<div class="form">
				<input type="text" id="username" v-model="username" required placeholder=" 更改用户名......">
				<button type="submit" @click="updateUsername()">更改</button>
			</div>
		</form>
		<form>
			<div class="form">
				<input type="text" id="password" v-model="password" required placeholder=" 更改密码......">
				<button type="submit" @click="updatePwd()">更改</button></div>
		</form>
		<form>
			<div class="form">
				<input type="text" id="phonenumber" v-model="phonenumber" required placeholder=" 更改电话号码......">
				<button type="submit" @click="updatePhone()">更改</button></div>
		</form>
		<button class="back" @click="back">返回</button>
	</div>
	
</template>

<script>
	import request from '../../utils/request.js';
	import Vue from 'vue'
		
	export default {
		data() {
			return {
				username:'',
				password:'',
				phonenumber:'',
				userInfo:{},
				allUserInfo:[]
			};
		},
		computed: {
			
		},
		mounted() {
			this.getAllUserInfo();
			wx.getStorage({
				key:'userInfo',
				success:(res)=>{
					this.userInfo=JSON.parse(res.data);
				}
			})
		},
		methods: {
			async getAllUserInfo(){
				const res=await request('/getUserInfo');
				this.allUserInfo=res.userInfo;
			},
			updateUsername(){
				request('/updateUsername?username='+this.username+'&oldname='+this.userInfo.nickName);
				this.getAllUserInfo();
				var that=this;
				wx.showModal({
					title:'提示',
					content:'修改成功',
					success(res){
						if(res.confirm){
							that.refresh();
							wx.reLaunch({
								url:'/pages/update/update'
							})
						}
					}
				})
			},
			updatePwd(){
				request('/updatePwd?pwd='+this.password+'&nickName='+this.userInfo.nickName);
				this.getAllUserInfo();
				var that=this;
				wx.showModal({
					title:'提示',
					content:'修改成功',
					success(res){
						if(res.confirm){
							that.refresh();
							wx.reLaunch({
								url:'/pages/update/update'
							})
						}
					}
				})
			},
			updatePhone(){
				request('/updatePhonenum?num='+this.phonenumber+'&nickName='+this.userInfo.nickName);
				this.getAllUserInfo();
				var that=this;
				wx.showModal({
					title:'提示',
					content:'修改成功',
					success(res){
						if(res.confirm){
							that.refresh();
							wx.reLaunch({
								url:'/pages/update/update'
							})
						}
					}
				})
			},
			refresh(){
				//修改Storage
				var that=this;
				var i,index;
				var flag=false;
				for(i=0;i<this.allUserInfo.length;i++){
					if(this.userInfo.userName===this.allUserInfo[i].userName){
						flag=true;
						index=i;
						break;
					}
				}
				wx.setStorage({
					key:"userInfo",
					data:JSON.stringify(that.allUserInfo[index])
				})
			},
			back(){
				wx.reLaunch({
					url:'/pages/personal/personal'
				})
			}
		}
	}
</script>

<style scoped>
	.update-container {
		margin: 100rpx auto;
		padding: 20px;
	}
	.form {
		margin-bottom: 15px;
		display: flex;
		align-items: center;
	}
	.back{
		width: 60%;
		height: 100rpx;
		font-size: 40rpx;
		margin: 0 auto;
	}
	input {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border: 1px solid #000;
		border-radius: 5px;
	}
	button {
		margin-right: -30rpx;
		width: 20%;
		height: 80rpx;
		background-color: #bb2c08;
		color: white;
		border: none;
		font-size: 32rpx;
		border-radius: 5px;
	}
</style>